<template>
	<view class="w-100">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head-style flex-1 fixed-top border-bottom pb-3">
			<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="flex-1 row-ac mx-3">
				<view class="iconfont icon-search-01"></view>
				<view class="flex-1 row font-s-45 font-w">产品分类</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="flex-1" :style="'height:' + headHeight + 'px;'"></view>
		<view class="flex-1 row-ac" :style="'height:' + dynamicHeight  + 'px;'">
			<view class="left-box" :style="'height:' + dynamicHeight  + 'px;'">
				<viiew class="flex-1 left-bg-img" :style="'height:' + dynamicHeight  + 'px;'">
					<image src="https://elianto.createbei.com/files/common/641654444.png" class="flex-1" mode="" :style="'height:' + dynamicHeight  + 'px;'"></image>
				</viiew>
				<view class="flex-1 left-item-box">
					<view class="left-item row" v-for="(item,index) in categoryList" :key="index"
						@click="takeCategory(item, index)">
						<view class="font-s-45" :class="tabIndex == index ? 'text-hover-dark font-w' : 'text-muted'">
							{{ item.category_name }}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-1" :style="'height:' + dynamicHeight  + 'px;'">
				<scroll-view scroll-y class="flex-1" :style="'height:' + dynamicHeight  + 'px;'" @scrolltolower="scrolltolower">
					<view class="flex-1 c-av" v-if="categoryImg">
						<image :src="categoryImg" class="flex-1" mode=""></image>
					</view>
					<view class="flex-1 mx-2 row-ac-fw mt-3">
						<view class="product-item mt-2 mb-4" v-for="(item,index) in productList" :key="index" @click="toGoodsDetails(item)">
							<view class="product-img">
								<image :src="item.image_list[0].url" mode=""></image>
							</view>
							<view class="flex-1 mx-2 mt-3 row-a-j-fc">
								<view class="font-s-35 font-w-600 in1line">{{ item.product_name }}</view>
								<view class="font-s-3 mt-1" v-if="item.price > 0">￥{{ item.price }}</view>
								<view class="font-s-3 mt-1" v-else>预售</view>
								<view class="font-s-3 mt-2 to-detail">查看详情</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		productCategoriesTreeUrl,
		productListUrl
	} from '@/api/index'
	export default {
		data() {
			return {
				statusBarHeight: '',
				headHeight: '',
				allWindowHeight: '',
				dynamicHeight: '',
				scrollHeight: '',
				tabIndex: 0,
				categoryList: [],
				categoryImg: '',
				categoryindexlist: [],
				queryInfo: {
					category_id: '',
					is_recommend: '',
					page: 1,
					page_size: 16
				},
				productList: [],
				productTotal:''

			}
		},
		// #ifdef MP-WEIXIN
		mounted() {
			uni.createSelectorQuery()
				.in(this)
				.select('.head-style')
				.boundingClientRect(data => {
					this.headHeight = data.height;
					this.calculateDynamicHeight();
				})
				.exec();
		},
		// #endif
		
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight + 5
				this.allWindowHeight = res.windowHeight
			})
			this.calculateDynamicHeight();
		},
		onLoad() {
			this.getProductcategories()
		},
		methods: {
			getProductcategories() {
				this.$R.get(productCategoriesTreeUrl).then((res) => {
					if (res.code == 200) {
						this.categoryindexlist = res.data.list;
						this.categoryList = [{
							id: 0,
							category_name: '产品推荐'
						}, ...this.categoryindexlist];
						this.queryInfo.is_recommend = 'True'
						this.getProductList()
					}
				});
			},
			getProductList() {
				this.$R.get(productListUrl, this.queryInfo).then(res => {
					console.log('9999', res.code);
					if (res.code == 200) {
						this.productList = res.data.list
						console.log('11111111', this.productList);
						this.productTotal = res.data.total
					}
				})
			},
			calculateDynamicHeight() {
				if (this.headHeight && this.allWindowHeight) {
					this.dynamicHeight = this.allWindowHeight - this.headHeight;
				}
			},
			takeCategory(item, index) {
				this.tabIndex = index
				if (item.id == 0) {
					this.queryInfo.is_recommend = 'True'
					this.queryInfo.category_id = ''
				} else {
					this.categoryImg = item.cover_image
					this.queryInfo.category_id = item.id
					this.queryInfo.is_recommend = ''
				}
				this.getProductList()
			},
			scrolltolower(){
				if(this.productTotal !== this.productList){
					this.queryInfo.page_size += 16
					this.getProductList()
				}
			},
			toGoodsDetails(item){
				uni.navigateTo({
					url: '/pages/product/details?productId=' + item.id,
				});
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.category-guide {
		width: 76rpx;
		height: 9rpx;
		margin-top: 15rpx;
	}

	.left-box {
		width: 212rpx;
		background-color: #f5f5f5;
		border-right: 1rpx solid #dee2e6;
		position: relative;
	}
	.left-item-box{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		.left-item {
			width: 212rpx;
			height: 112rpx;
		}
	}

	.c-av {
		height: 306rpx;
	}

	.product-item {
		width: 239rpx;
		height: 398rpx;
		margin-right: 19rpx;

		&:nth-child(2n) {
			margin-right: 0;
		}

		.product-img {
			width: 239rpx;
			height: 239rpx;

			image {
				width: 239rpx;
				height: 239rpx;
			}
		}
		.to-detail{
			padding-bottom: 6rpx;
			border-bottom: 2rpx solid #666;
		}
	}
</style>